<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-浮动注意点</title>
</head>
<style>
    body {
        border: 1px black solid;
    }
    
    #box1 {
        width: 100px;
        height: 100px;
        background: yellow;
    }
    
    #box2 {
        width: 200px;
        height: 200px;
        background: red;
        float: left;
    }
    
    #box3 {
        width: 300px;
        height: 300px;
        background: blue;
    }
    
    #box4 {
        background: green;
        float: left;
    }
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 300px;
        height: 300px;
        border: 1px black solid;
    }
    
    li {
        width: 100px;
        height: 100px;
        background: red;
        border: 1px yellow solid;
        box-sizing: border-box;
        float: left;
    }
    
    li:nth-of-type(1) {
        height: 120px;
    }
    
    li:nth-of-type(2) {
        height: 90px;
    }
    
    span:last-of-type {
        float: right;
    }
</style>

<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">本文论述了应用简单设备和录屏软件制作网络视频课件的方法,并介绍了用屏幕录像专家制作视频课件的软件硬件环境和制作步骤,最后总结了制作网络视频课件的一些经验。本文所介绍的网络课件制作设备简单、操作过程简便易行,非常适合教师自制视频课件。</div>
    <div id="box4">这是一个没有宽度的块元素</div> -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaa</span><span>bbb</span>
</body>

</html>